import React from 'react'
import { Button, Input, InputNumber, Select, DatePicker, Form, Radio, Switch } from 'antd'

import './index.less'

const FormItem = Form.Item
const RadioGroup = Radio.Group

class ModForm extends React.PureComponent {
  handleSubmit = e => {
    const { form } = this.props
    e && e.preventDefault()
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { onOk } = this.props
        onOk && onOk(values)
        form.resetFields()
      }
    })
  }

  doCancel = () => {
    const { onCancel, form } = this.props
    onCancel && onCancel()
    form.resetFields()
  }

  generateFormItem = ({ formItemLayout, label, hasFeedBack, name, options, component }) => {
    const { getFieldDecorator } = this.props.form
    return (
      <FormItem {...formItemLayout} key={name} label={label} hasFeedBack={hasFeedBack}>
        {getFieldDecorator(name, options)(component)}
      </FormItem>
    )
  }

  getTextField = field => (
    <span className="ant-form-text">{field.options && field.options.initialValue}</span>
  )

  getInputField = field => <Input />

  getInputNumberField = field => (
    <InputNumber
      step={field.options.step}
      formatter={field.options.formatter}
      style={{ width: '100%' }}
    />
  )

  getTextAreaField = field => (
    <Input type="textarea" rows={field.options.rows || 4} disabled={field.options.disabled} />
  )

  getSelectField = field => (
    <Select
      placeholder="请选择"
      style={{
        width: '100%'
      }}
      disabled={field.disabled}
      multiple={field.multiple}
    >
      {field.items().map(({ key, value }) => (
        <Select.Option key={key.toString()} value={key.toString()}>
          {value}
        </Select.Option>
      ))}
    </Select>
  )

  getRadioGroupField = field => (
    <RadioGroup>
      {field.items().map(({ key, value }) => (
        <Radio key={key.toString()} value={key.toString()}>
          {value}
        </Radio>
      ))}
    </RadioGroup>
  )

  getDateField = field => <DatePicker showToday={false} placeholder="请选择日期" />

  getDateTimeField = field => (
    <DatePicker showTime format="YYYY-MM-DD" placeholder="请选择时间" showToday={false} />
  )

  getSwitchField = field => (
    <Switch
      checkedChildren="开"
      unCheckedChildren="关"
      disabled={field.options.disabled}
      defaultChecked={field.options.initialValue}
    />
  )

  getUploadField = field => (
    <input type="file" ref={field.options.ref} disabled={field.options.disabled} name="patchFile" />
  )

  generateFormFields(fields) {
    const formItemLayout = this.props.formItemLayout || {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 }
    }
    const components = []
    for (const field of fields) {
      let component = null
      switch (field.type) {
        case 'input':
          component = this.getInputField(field)
          break
        case 'inputNumber':
          component = this.getInputNumberField(field)
          break
        case 'select':
          component = this.getSelectField(field)
          break
        case 'radioGroup':
          component = this.getRadioGroupField(field)
          break
        case 'date':
          component = this.getDateField(field)
          break
        case 'datetime':
          component = this.getDateTimeField(field)
          break
        case 'switch':
          component = this.getSwitchField(field)
          break
        case 'upload':
          component = this.getUploadField(field)
          break
        case 'textarea':
          component = this.getTextAreaField(field)
          break
        default:
          component = this.getTextField(field)
          break
      }
      component = this.generateFormItem({
        formItemLayout,
        component,
        label: field.label,
        name: field.name,
        options: field.options,
        hasFeedBack: field.type === 'input'
      })
      components.push(component)
    }
    const buttons = (
      <FormItem
        key="control-buttons"
        wrapperCol={{
          span: 14,
          offset: 6
        }}
      >
        <div className="buttons">
          {this.props.showCancel && <Button onClick={this.doCancel}>取消</Button>}
          {!this.props.noBtn && (
            <Button type="primary" htmlType="submit">
              {this.props.okText || '确定'}
            </Button>
          )}
        </div>
      </FormItem>
    )
    components.push(buttons)
    return components
  }

  render() {
    const { fields } = this.props
    return (
      <div className="formWrapper">
        <Form onSubmit={this.handleSubmit}>{this.generateFormFields(fields)}</Form>
      </div>
    )
  }
}

const ModalForm = Form.create()(ModForm)

export default ModalForm
